<template>
    <div>
        <div class="container">
            <div class="title-box">
                <span class="btn">
                    <el-button @click="today" type="primary" size="small">بۈگۈن</el-button>
                </span>
                <span class="date">
                    <el-date-picker v-model="date" placeholder=""></el-date-picker>
                </span>
                <span class="confirm">
                    <el-button type="success" size="small" @click="submit">مۇقىملاشتۇرۇش</el-button>
                </span>
            </div>
            <div class="flex-box">
                <div class="box">
                    <div id="graph1"></div>
                    <br>
                    <div class="cnt">
                        <div>
                            تارتۇق:{{Math.round(admireList.reduce(
                    (total, curr) => total + curr.money,
                    0
                )/100)}} يۈەن
                        </div>
                        <div>
                            يۈەن VIP:{{Math.round(vipList.reduce(
                    (total, curr) => total + curr.money,
                    0
                )/100)}}
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div id="graph2"></div>
                </div>
                <div class="box"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            date: null,
            list: [],
            admireList: [],
            vipList: []
        };
    },
    mounted() {
        this.getData(moment().format("YYYY-MM-DD"));
    },
    methods: {
        moment,
        async getData(date) {
            try {
                let res = await this.$http.get("/getOrderByDate?date=" + date);
                let list = res.data.data.list;
                let admireList = [],
                    vipList = [];
                list.forEach(item => {
                    if (item.type == "ADMIRE") {
                        admireList.push(item);
                    } else if (item.type == "VIP") {
                        vipList.push(item);
                    }
                });
                this.admireList = admireList;
                this.vipList = vipList;
                this.list = list;
                let vipSum = this.vipList.reduce(
                    (total, curr) => total + curr.money,
                    0
                );
                let admireSum = this.admireList.reduce(
                    (total, curr) => total + curr.money,
                    0
                );
                this.draw(vipSum, admireSum);
                this.draw2();
            } catch (error) {}
        },
        submit() {
            this.getData(this.moment(this.date).format("YYYY-MM-DD"));
        },
        draw(vip, admire) {
            let myChart = this.$echarts.init(document.getElementById("graph1"));
            myChart.setOption({
                textStyle: {
                    fontFamily: "ALKATIP UI"
                },
                title: {
                    text: "زاكاس ئانالىزى",
                    // subtext: "纯属虚构",
                    x: "center"
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    left: "left",
                    type: "scroll",
                    orient: "vertical",
                    right: 10,
                    top: 50,
                    bottom: 20,
                    data: ["تارتۇق", "VIP"]
                },
                series: [
                    {
                        name: "سومما",
                        type: "pie",
                        radius: "50%",
                        center: ["50%", "60%"],
                        data: [
                            { value: Math.round(admire / 100), name: "تارتۇق" },
                            { value: Math.round(vip / 100), name: "VIP" }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            });
        },
        draw2() {
            let myChart = this.$echarts.init(document.getElementById("graph2"));
            let total = this.list.reduce(
                (total, curr) => total + curr.money,
                0
            );
            myChart.setOption({
                textStyle: {
                    fontFamily: "ALKATIP UI"
                },
                title: {
                    text: "ئومۇمى سومما:" + Math.round(total / 100) + " يۈەن",
                    // subtext: "纯属虚构",
                    x: "center"
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    left: "left",
                    type: "scroll",
                    orient: "vertical",
                    right: 10,
                    top: 50,
                    bottom: 20,
                    data: ["سومما"]
                },
                series: [
                    {
                        name: "سومما",
                        type: "pie",
                        radius: "50%",
                        center: ["50%", "60%"],
                        data: [
                            { value: Math.round(total / 100), name: "سومما" }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            });
        },
        today() {
            this.date = null;
            this.getData(this.moment().format("YYYY-MM-DD"));
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    margin: 30px;
    padding: 0 30px 30px 30px;
    .title-box {
        display: flex;
        justify-content: flex-start;
        padding: 20px;
        .btn {
            margin-left: 0px;
            text-align: center;
            display: inline-block;
        }
        .date,
        .confirm {
            margin-left: 40px;
        }
    }
    .flex-box {
        display: flex;
        justify-content: space-around;
        .box {
            width: 30%;
            box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
            min-height: 500px;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .cnt {
                margin-top: 30px;
                text-align: center;
                direction: rtl;
                font-size: 24px;
                line-height: 30px;
            }
        }
        #graph1,
        #graph2 {
            width: 80%;
            height: 400px;
        }
    }
}
</style>